<template>
  <div>
    <div class="submitOrder">
        <div class="info">
            <div style="display: flex;align-items: start; width: 100%;">
                <div class="preferred-price">
                    <div class="title">优选价</div>
                    <div class="price">
                        <span style="width: 120px;">价格（元）</span>
                        <el-input v-model="price" placeholder="请输入价格" />
                        元
                    </div>
                    <div class="time">
                        <span style="width: 120px;">时限（小时）</span>
                        <el-input v-model="time" placeholder="请输入时限" />
                        小时
                    </div>
                    <div class="tip">预计1分钟内被接手，高级陪练员为您服务，胜率更高</div>
                    <!-- <img @click="showPricePicker" src="../../../assets/icons/edit.png"></img> -->
                </div>
                <div class="order-msg">
                    <div class="order-title">下单内容</div>
                    <div class="msg1">
                        <span
                            v-if="formData.rankType && formData.sparringType == '场次' | formData.sparringType == '定位赛' | formData.sparringType == '女神陪练'">{{
                                formData.rankType
                            }}</span>
                        <span v-if="formData.beforeLevel && formData.sparringType == '定位赛'">{{ formData.beforeLevel
                        }}</span>
                        <span v-if="formData.needGames && formData.sparringType == '定位赛'">定位赛{{ formData.needGames
                        }}</span>
                        <span v-if="formData.session && formData.sparringType == '场次'">{{ formData.session }}</span>
                        <span v-if="formData.duration && formData.sparringType == '女神陪练'">{{ formData.duration }}</span>

                        <span
                            v-if="formData.currentTask && formData.sparringType == '场次' | formData.sparringType == '女神陪练'">{{
                                formData.currentTask[1], formData.currentTask[2] }}</span>
                    </div>
                    <!-- <div class="msg2">
                    <span v-if="formData.mingwenLevel && formData.heroCount">铭文{{ formData.mingwenLevel }}级 英雄数量{{
                        formData.heroCount }}个</span>
                    <span v-else-if="formData.mingwenLevel">铭文{{ formData.mingwenLevel }}级</span>
                </div> -->
                </div>
            </div>
            <div style="width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: start;">
                <div class="special-task">
                    <div class="label" @click="showSpecialPicker">点击展示特殊要求</div>
                </div>
                <div class="special-task">
                    <div class="label">立即下单</div>
                </div>
            </div>
        </div>
        <!-- <div class="login-mode">
            <div class="tab">账号密码登录</div>
            <div class="username">
                <div class="label">游戏角色</div>
                <div class="handle">
                    <input type="text" placeholder="请输入您的游戏角色名">

                </div>
            </div>
            <div class="phone">
                <div class="label">号主手机（必填）</div>
                <div class="handle">
                    <input type="text" placeholder="请输入您的手机号">
                </div>
            </div>
            <div class="phone">
                <div class="label">游戏角色</div>
                <div class="handle">
                    <input type="text" placeholder="请输入您的游戏角色名">
                </div>
            </div>
            <div class="contact">
                <div class="label">发单者联系方式（必填）</div>
                <div class="handle">
                    <input type="text" placeholder="请输入发单者的联系方式">
                </div>
            </div>
        </div> -->
        <!-- <div class="login-mode">
            <div class="tab">陪练信息</div>
            <div class="username">
                <div class="label">游戏角色名</div>
                <div class="handle">
                    <input type="text" placeholder="请输入游戏昵称">
                </div>
            </div>
            <div class="phone">
                <div class="label">号主手机（必填）</div>
                <div class="handle">
                    <input type="text" placeholder="请输入您的手机号">
                </div>
            </div>
        </div> -->
        <!-- <div class="point-hero" v-if="formData.mode != '宝典'">
            <div class="label">指定英雄（加价30%）</div>
            <div class="handle" @click="showHeroPicker">
                <view class="selected-tag">
                    {{ hero || '请选择指定英雄' }}
                    <img src="../../../assets/icons/arrow-down.png"></img>
                </view>
            </div>
        </div> -->
        <!-- <div class="special-task">
            <div class="label">特殊要求</div>
            <div class="handle" @click="showSpecialPicker">
                <view class="selected-tag">
                    {{ '保证金/订单要求等' }}
                    <img src="../../../assets/icons/arrow-down.png"></img>
                </view>
            </div>
        </div> -->
        <!-- <div class="footer">
            <div class="button">发布订单</div>
        </div> -->
    </div>
    <!-- 优选价弹窗 -->
    <el-dialog v-model="pricePopup" width="1000" :before-close="hidePricePicker">
        <view class="popup-content">
            <view>
                <div class="level">
                    <span>价格（元）</span>
                    <input type="number" placeholder="请输入价格" v-model="price">
                </div>
                <div class="role">
                    <span>时限（小时）</span>
                    <input type="number" placeholder="请输入时限" v-model="time">
                </div>
            </view>

        </view>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="hidePricePicker">取消</el-button>
                <el-button type="primary" @click="confirmPricePicker">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 指定英雄弹窗 -->
    <!-- 指定英雄弹窗 -->
    <el-dialog v-model="heroPopup" width="1000" :before-close="hideHeroPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in heroTree" :key="index" class="popup-item" @click="selectHeroItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 特殊要求弹窗 -->
    <el-dialog v-model="specialPopup" title="特殊要求" width="1000" :before-close="hideSpecialPicker">
        <view class="popup-content">
            <!-- <div class="server">
                <div class="server-title">
                    服务保障
                </div>
                <div class="server-content">
                    <div class="server-content-item">
                        <div class="server-content-item-text">安全保证金</div>
                        <div class="server-content-item-value">
                            <input type="number" v-model="securityDeposit">
                        </div>
                        <div class="server-content-item-unit">元</div>
                    </div>
                    <div class="server-content-item">
                        <div class="server-content-item-text">效率保证金</div>
                        <div class="server-content-item-value">
                            <input type="number" v-model="efficiencyDeposit">
                        </div>
                        <div class="server-content-item-unit">元</div>
                    </div>
                </div>
            </div> -->
            <div class="order-require">
                <div class="order-require-title">订单要求</div>
                <!-- 排位赛-订单要求 -->
                <div class="order-require-content" v-if="formData.sparringType != '女神陪练'">
                    <div class="order-require-content-item"> 若结束时整体胜率大于等于80%需全额结算，胜率
                        70%-79%之间按胜率结算，60%-69%之间结算一半，60%
                        以下胜率，可以追究效率/双金赔付
                    </div>
                </div>
                <div class="order-require-content" v-if="formData.sparringType == '女神陪练'">
                    <div class="order-require-content-item">女神陪练接单者需为女生玩家，需可提供语音游戏服务
                    </div>
                    <div class="order-require-content-item">1.下单后陪玩需第一时间通过订单及订单内的联系方式联系老板，预计5分钟内
                    </div>
                    <div class="order-require-content-item">2.联系后可提供试音服务，老板可以根据满意情况进行确认
                    </div>
                    <div class="order-require-content-item">3.服务游戏过程主要以游戏陪聊娱乐为主，不包上分哦
                    </div>
                    <div class="order-require-content-item">4.订单打满任务时限后即可要求结算
                    </div>
                    <div class="order-require-content-item">5.若因陪陪服务态度等问题出现纠纷，您可以保留相关凭证申请撤单退款
                    </div>
                    <div class="order-require-content-item">6.若陪练期间陪陪出现拉私单或私下交易与要求私下加款等行为，您可以随时申请退款并追究保证金处罚，官方将从严从重处理
                    </div>
                </div>
            </div>
            <!-- <div class="special-require" v-if="formData.mode != '宝典'">
                <div class="special-require-title">订单要求</div>

                <div class="special-require-content" v-if="formData.mode == '排位赛'">
                    <checkbox color="#57b1ff"></checkbox>
                    <span style="display: flex;align-items: center;">包补分 <i
                            style="color: #aaa;margin-left: 20rpx;">加价50%</i></span>
                </div>
                <div class="special-require-content">
                    <checkbox color="#57b1ff"></checkbox>
                    <span style="display: flex;align-items: center;">裁决之镰 <i
                            style="color: #aaa;margin-left: 20rpx;">加12小时</i></span>
                </div>

            </div> -->
            <view class="popup-footer" @click="hideSpecialPicker">确定
            </view>
        </view>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'YXLMsubmitOrderPL',
  props: {
    formDataInput: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: { ...this.formDataInput },
      price: '1',
      time: '2',
      pricePopup: false,
      heroTree: [
        { "text": "辛德拉", "value": "辛德拉" }, { "text": "薇恩", "value": "薇恩" }, { "text": "亚托克斯", "value": "亚托克斯" },
        { "text": "阿卡丽", "value": "阿卡丽" }, { "text": "雷恩加尔", "value": "雷恩加尔" }, { "text": "塔里克", "value": "塔里克" },
        { "text": "克烈", "value": "克烈" }, { "text": "金克丝", "value": "金克丝" }, { "text": "吉格斯", "value": "吉格斯" },
        { "text": "艾尼维亚", "value": "艾尼维亚" }, { "text": "丽桑卓", "value": "丽桑卓" }, { "text": "卡特琳娜", "value": "卡特琳娜" },
        { "text": "斯维因", "value": "斯维因" }, { "text": "菲兹", "value": "菲兹" }, { "text": "韦鲁斯", "value": "韦鲁斯" },
        { "text": "艾翁", "value": "艾翁" }, { "text": "黑默丁格", "value": "黑默丁格" }, { "text": "艾瑞莉娅", "value": "艾瑞莉娅" },
        { "text": "泰隆", "value": "泰隆" }, { "text": "赵信", "value": "赵信" }, { "text": "嘉文四世", "value": "嘉文四世" },
        { "text": "盖伦", "value": "盖伦" }, { "text": "奎因", "value": "奎因" }, { "text": "莫甘娜", "value": "莫甘娜" },
        { "text": "萨科", "value": "萨科" }, { "text": "奥莉安娜", "value": "奥莉安娜" }, { "text": "格雷福斯", "value": "格雷福斯" },
        { "text": "锐雯", "value": "锐雯" }, { "text": "迦娜", "value": "迦娜" }, { "text": "布隆", "value": "布隆" },
        { "text": "布兰德", "value": "布兰德" }, { "text": "卡莉丝塔", "value": "卡莉丝塔" }, { "text": "波比", "value": "波比" },
        { "text": "伊芙琳", "value": "伊芙琳" }, { "text": "拉克丝", "value": "拉克丝" }, { "text": "乐芙兰", "value": "乐芙兰" },
        { "text": "俄洛伊", "value": "俄洛伊" }, { "text": "普朗克", "value": "普朗克" }, { "text": "艾希", "value": "艾希" },
        { "text": "塔姆", "value": "塔姆" }, { "text": "安妮", "value": "安妮" }, { "text": "娜美", "value": "娜美" },
        { "text": "雷克顿", "value": "雷克顿" }, { "text": "锤石", "value": "锤石" }, { "text": "兰博", "value": "兰博" },
        { "text": "维克托", "value": "维克托" }, { "text": "亚索", "value": "亚索" }, { "text": "黛安娜", "value": "黛安娜" },
        { "text": "莫德凯撒", "value": "莫德凯撒" }, { "text": "婕拉", "value": "婕拉" }, { "text": "阿狸", "value": "阿狸" },
        { "text": "古拉加斯", "value": "古拉加斯" }, { "text": "特朗德尔", "value": "特朗德尔" }, { "text": "约里克", "value": "约里克" },
        { "text": "崔斯特", "value": "崔斯特" }, { "text": "凯南", "value": "凯南" }, { "text": "奈德丽", "value": "奈德丽" },
        { "text": "奥拉夫", "value": "奥拉夫" }, { "text": "沃利贝尔", "value": "沃利贝尔" }, { "text": "辛吉德", "value": "辛吉德" },
        { "text": "瑟庄妮", "value": "瑟庄妮" }, { "text": "瑞兹", "value": "瑞兹" }, { "text": "希瓦娜", "value": "希瓦娜" },
        { "text": "崔丝塔娜", "value": "崔丝塔娜" }, { "text": "泰达米尔", "value": "泰达米尔" }, { "text": "李青", "value": "李青" },
        { "text": "纳尔", "value": "纳尔" }, { "text": "卡西奥佩娅", "value": "卡西奥佩娅" }, { "text": "费德提克", "value": "费德提克" },
        { "text": "慎", "value": "慎" }, { "text": "阿利斯塔", "value": "阿利斯塔" }, { "text": "茂凯", "value": "茂凯" },
        { "text": "德莱厄斯", "value": "德莱厄斯" }, { "text": "拉莫斯", "value": "拉莫斯" }, { "text": "凯特琳", "value": "凯特琳" },
        { "text": "蔚", "value": "蔚" }, { "text": "孙悟空", "value": "孙悟空" }, { "text": "娑娜", "value": "娑娜" },
        { "text": "卡蜜尔", "value": "卡蜜尔" }, { "text": "德莱文", "value": "德莱文" }, { "text": "墨菲特", "value": "墨菲特" },
        { "text": "阿兹尔", "value": "阿兹尔" }, { "text": "内瑟斯", "value": "内瑟斯" }, { "text": "阿木木", "value": "阿木木" },
        { "text": "厄运小姐", "value": "厄运小姐" }, { "text": "加里奥", "value": "加里奥" }, { "text": "诺提勒斯", "value": "诺提勒斯" },
        { "text": "克格莫", "value": "克格莫" }, { "text": "凯尔", "value": "凯尔" }, { "text": "扎克", "value": "扎克" },
        { "text": "卢锡安", "value": "卢锡安" }, { "text": "基兰", "value": "基兰" }, { "text": "艾克", "value": "艾克" },
        { "text": "沃里克", "value": "沃里克" }, { "text": "厄加特", "value": "厄加特" }, { "text": "乌迪尔", "value": "乌迪尔" },
        { "text": "蕾欧娜", "value": "蕾欧娜" }, { "text": "斯卡纳", "value": "斯卡纳" }, { "text": "卡尔萨斯", "value": "卡尔萨斯" },
        { "text": "伊泽瑞尔", "value": "伊泽瑞尔" }, { "text": "卡尔玛", "value": "卡尔玛" }, { "text": "赛恩", "value": "赛恩" },
        { "text": "杰斯", "value": "杰斯" }, { "text": "图奇", "value": "图奇" }, { "text": "易", "value": "易" },
        { "text": "菲奥娜", "value": "菲奥娜" }, { "text": "贾克斯", "value": "贾克斯" }, { "text": "烬", "value": "烬" },
        { "text": "璐璐", "value": "璐璐" }, { "text": "维迦", "value": "维迦" }, { "text": "巴德", "value": "巴德" },
        { "text": "弗拉基米尔", "value": "弗拉基米尔" }, { "text": "雷克塞", "value": "雷克塞" }, { "text": "卡萨丁", "value": "卡萨丁" },
        { "text": "科加斯", "value": "科加斯" }, { "text": "卡兹克", "value": "卡兹克" }, { "text": "玛尔扎哈", "value": "玛尔扎哈" },
        { "text": "维克兹", "value": "维克兹" }, { "text": "努努和威朗普", "value": "努努和威朗普" }, { "text": "提莫", "value": "提莫" },
        { "text": "塔莉垭", "value": "塔莉垭" }, { "text": "库奇", "value": "库奇" }, { "text": "劫", "value": "劫" },
        { "text": "魔腾", "value": "魔腾" }, { "text": "千珏", "value": "千珏" }, { "text": "泽拉斯", "value": "泽拉斯" },
        { "text": "希维尔", "value": "希维尔" }, { "text": "潘森", "value": "潘森" }, { "text": "赫卡里姆", "value": "赫卡里姆" },
        { "text": "布里茨", "value": "布里茨" }, { "text": "伊莉丝", "value": "伊莉丝" }, { "text": "索拉卡", "value": "索拉卡" },
        { "text": "奥瑞利安·索尔", "value": "奥瑞利安·索尔" }, { "text": "蒙多医生", "value": "蒙多医生" }, { "text": "厄斐琉斯", "value": "厄斐琉斯" },
        { "text": "卡莎", "value": "卡莎" }, { "text": "凯隐", "value": "凯隐" }, { "text": "莉莉娅", "value": "莉莉娅" },
        { "text": "妮蔻", "value": "妮蔻" }, { "text": "奥恩", "value": "奥恩" }, { "text": "派克", "value": "派克" },
        { "text": "奇亚娜", "value": "奇亚娜" }, { "text": "洛", "value": "洛" }, { "text": "芮尔", "value": "芮尔" },
        { "text": "莎弥拉", "value": "莎弥拉" }, { "text": "赛娜", "value": "赛娜" }, { "text": "萨勒芬妮", "value": "萨勒芬妮" },
        { "text": "瑟提", "value": "瑟提" }, { "text": "塞拉斯", "value": "塞拉斯" }, { "text": "佛耶戈", "value": "佛耶戈" },
        { "text": "霞", "value": "霞" }, { "text": "永恩", "value": "永恩" }, { "text": "悠米", "value": "悠米" },
        { "text": "佐伊", "value": "佐伊" }, { "text": "格温", "value": "格温" }, { "text": "阿克尚", "value": "阿克尚" },
        { "text": "薇古丝", "value": "薇古丝" }, { "text": "泽丽", "value": "泽丽" }, { "text": "烈娜塔", "value": "烈娜塔" },
        { "text": "尼菈", "value": "尼菈" }, { "text": "卑尔维斯", "value": "卑尔维斯" }, { "text": "奎桑提", "value": "奎桑提" },
        { "text": "明烛", "value": "明烛" }, { "text": "纳亚菲利", "value": "纳亚菲利" }, { "text": "贝蕾亚", "value": "贝蕾亚" },
        { "text": "斯莫德", "value": "斯莫德" }, { "text": "阿萝拉", "value": "阿萝拉" }
      ],
      hero: "",
      heroPopup: false,
      securityDeposit: 5,
      efficiencyDeposit: 5,
      specialPopup: false
    };
  },
  watch: {
    formDataInput: {
      handler(newValue) {
        this.formData = { ...newValue };
        console.log("Prop formData changed:", this.formData);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    showPricePicker() {
      this.pricePopup = true;
    },
    hidePricePicker() {
      this.pricePopup = false;
    },
    confirmPricePicker() {
      this.pricePopup = false;
    },
    showHeroPicker() {
      this.heroPopup = true;
    },
    hideHeroPicker() {
      this.heroPopup = false;
    },
    selectHeroItem(item) {
      this.hero = item.text;
      this.hideHeroPicker();
    },
    showSpecialPicker() {
      this.specialPopup = true;
    },
    hideSpecialPicker() {
      this.specialPopup = false;
    }
  },
  created() {
    // Initialization logic if needed
  }
};
</script>
<style scoped>
.submitOrder {
    width: 100%;
    height: 100vh;
    padding: 24px 32px;
    background: #fff;
    margin-top: 20px;
    /* padding: 10px; */
    /* box-sizing: border-box; */
    /* background-color: #eee; */
}

.order-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.info {
    /* padding: 20px; */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: start;
    border-radius: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    flex-direction: column;
    /* background-color: #fff; */
}

.order-msg {
    width: 50%;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.5);
    padding: 20px;
    height: 200px;
    margin-left: 20px;
}

.order-msg .msg1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.order-msg .msg2 {
    font-size: 16px;
    font-weight: 400;
}

.order-msg .msg1 span,
.order-msg .msg2 span {
    margin-right: 10px;
}

.preferred-price {
    width: 50%;
    height: 200px;
    /* padding: 10px; */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    /* align-items: center; */
    /* justify-content: space-between; */
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.5);
    /* margin-top: 20px; */
    /* position: relative; */
    /* border-bottom: 2.5px solid #57b1ff; */
}

.preferred-price .title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.preferred-price .price,
.preferred-price .time {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #6041e9;
    margin-bottom: 10px;
}

.preferred-price .price .el-input,
.preferred-price .time .el-input {
    width: 50px;
    margin: 0 20px;
    font-size: 18px;
}

/* .preferred-price .price span {
    font-size: 18px;
    color: red;
    margin-right: 5px;
} */

/* .preferred-price .time {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #6041e9;
} */

.preferred-price img {
    cursor: pointer;
    /* position: absolute;
    top: 10px;
    right: 10px; */
    width: 30px;
    height: 30px;
}

.login-mode {
    border-radius: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    margin-top: 5px;
    /* padding: 20px; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.login-mode input {
    text-align: right;
    border: none;
    outline: none;
    font-size: 18px;
}

.login-mode .tab {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.login-mode .username,
.login-mode .phone,
.login-mode .contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 18px;
}

.login-mode .username .handle,
.login-mode .phone .handle,
.login-mode .contact .handle {
    font-size: 16px;
    font-weight: 400;
    color: #aaa;
}

.point-hero,
.special-task {
    width: 40%;
    border-radius: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    /* margin-top: 5px; */
    /* padding: 20px; */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin-top: 10px;
    /* margin-left: 20px; */
}

.point-hero .label,
.special-task .label {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color: #6041e9;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 16px;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-task .label:hover {
    cursor: pointer;
    background-color: #3105f8;
}

.point-hero .handle,
.special-task .handle {
    font-size: 16px;
    font-weight: 400;
    color: #aaa;
}

.selected-tag {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 25px;
    border-radius: 4px;
    font-size: 18px;
    color: #666;
}

.selected-tag img {
    width: 12px;
    height: 12px;
    margin-left: 10px;
}

.input-group {
    display: flex;
    gap: 10px;
}

.input-group input {
    text-align: right;
    flex: 1;
    height: 40px;
    border-radius: 4px;
    padding: 0 10px;
    color: #666;
    border: 1px solid #ccc;
    outline: none;
    font-size: 18px;
}

.dual-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tier-picker {
    flex: 1;
    position: relative;
}

.tier-picker::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow {
    color: #666;
    font-size: 20px;
}

.picker {
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    color: #666;
    background-color: #fff;
}

.picker::placeholder {
    color: #999;
}

/* 输入框聚焦样式 */
input:focus {
    border-color: #1ba035;
    box-shadow: 0 0 5px rgba(26, 160, 53, 0.1);
}

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
}

.popup-content .title {
    width: 100%;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.server,
.order-require,
.special-require {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.server-title,
.order-require-title,
.special-require-title {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 10px;
}

.server-content,
.order-require-content {
    display: flex;
    max-height: 150px;
    overflow-y: auto;
    flex-direction: column;
    padding: 0 10px;
    box-sizing: border-box;
}

.server-content-item,
.order-require-content-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: 16px;
    color: #aaa;
}

.server-content-item-text {
    width: 30%;
    font-size: 18px;
}

.server-content-item-value {
    color: #000;
    width: 50%;
}

.server-content-item-value input {
    text-align: right;
    width: 100%;
    border: none;
    outline: none;
    font-size: 18px;
}

.server-content-item-unit {
    text-align: right;
    color: #000;
    width: 20%;
    font-size: 18px;
}

.special-require-content {
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: 16px;
    color: #aaa;
}

.special-require-content radio {
    margin-right: 10px;
    transform: scale(.8);
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 20px;
    box-sizing: border-box;
}

.level input,
.role input {
    text-align: right;
    width: 35%;
    border: none;
    outline: none;
    font-size: 18px;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 10px;
}

.popup-content .body {
    min-height: 500px;
    display: flex;
}

.popup-nav {
    width: 100px;
    /* 根据需要调整宽度 */
    border-right: 1px solid #eee;
    padding: 10px 0;
}

.nav-item {
    padding: 10px;
    font-size: 14px;
    color: #666;
}

.nav-item.active {
    color: #1ba035;
    font-weight: bold;
    border-left: 2px solid #1ba035;
    padding-left: 8px;
}

.popup-scroll {
    flex: 1;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    max-height: 500px;
}

.popup-group-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.popup-item {
    padding: 20px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 20px;
}

.popup-item-body {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 20px;
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    padding: 20px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14px;
    color: #999;
}

.popup-scroll {
    max-height: 500px;
    overflow-y: auto;
}

.popup-group {
    margin-bottom: 10px;
}

.popup-group-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 20px;
    border-radius: 16px;
    padding: 10px;
    color: #fff;
    background: #57b1ff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.footer {
    position: fixed;
    bottom: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background-color: #57b1ff;
    transition: all .3s;
}

.footer:hover {
    cursor: pointer;
    background-color: #3e91ff;
}
</style>